import React, { useState } from 'react'
import { Text, View, StyleSheet, AppState } from 'react-native'
import { Icon, SearchBar, TabBar } from '@ant-design/react-native'
import CommonFn from './pages/common-fn/index.js'

export default function Index() {
    const tabs = [
        {
            id: 'task',
            title: '任务',
        },
        {
            id: 'timeline',
            title: '时间线',
        },
        {
            id: 'reports',
            title: '统计',
        },
    ]

    const [selectedTab, setSelectedTab] = useState('task')

    function renderContent(pageText) {
        return (
            <View style={styles.styles}>
                <SearchBar placeholder="Search" showCancelButton />
                <Text style={{ margin: 50 }}>{pageText}</Text>
            </View>
        )
    }

    return (
        <TabBar unselectedTintColor="#949494" tintColor="#33A3F4" barTintColor="#f5f5f5">
            {tabs.map(({ id, title }, k) => {
                return (
                    <TabBar.Item
                        key={k}
                        title={title}
                        icon={<Icon name="home" />}
                        selected={selectedTab === id}
                        onPress={() => setSelectedTab(id)}
                    >
                        <CommonFn />
                    </TabBar.Item>
                )
            })}
        </TabBar>
    )
}

const styles = StyleSheet.create({
    tabItem: { flex: 1, alignItems: 'center', backgroundColor: 'white' },
})
